<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /*body{*/
            /*background: #000;*/
        /*}*/
        #p{
            width: 190px;
            height: 260px;
            background: url("img/tupian.png");
            margin:200px auto;
            text-align: center;
            color: #fff;
        }
        #p h2{
            padding-top: 40px;
            color: #fff;
        }
        #p p{
            margin-top: 100px;
            color: #ffffff;
            margin-bottom:20px;
        }
    span{
        margin-top: 15px;
    }
    </style>
</head>
<body>
    <div id="p">
        <h2>京东秒杀</h2>
        <p>18:00 点场 倒计时</p>
        <span class="qwe" id="h_">1</span>:
        <span class="qwe" id="p_">2</span>:
        <span class="qwe" id="s_">3</span>
    </div>
    <script>
        setInterval(function () {
            var h1 = 23;
            var p1 = 59;
            var s1 = 59;
            var h =h1-new Date().getHours();
            var p =p1-new Date().getMinutes();
            var s =s1-new Date().getSeconds();
            if (h<10){
                h_.innerHTML = '0'+h;
            }else {
                h_.innerHTML =h;
            }
            if (p<10){
                p_.innerHTML = '0'+p;
            }else {
                p_.innerHTML =p;
            }
            if (s<10){
                s_.innerHTML = '0'+s;
            }else {
                s_.innerHTML =s;
            }
        },1)
    </script>
</body>
</html>